<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--表头-->
<head th:insert="common/head::headBar(${title},${desc},${keyword},'/static/Kz.layedit/Content/Layui-KnifeZ/css/layui.css,/static/css/userShop.css')">
<body class="archive category ">
<div class="site">
    <!-- 头部-->
    <head th:insert="common/top::topBar(${resCategoryModel},${loginFlag},${resUser})"/>
    <div class="header-gap"></div>
    <div>
        <div class="main-users-cover">
            <input type="hidden" name="belongToId" id="belongId" th:value="${beLongUserId}"/>
            <div class="main-users-info">
                <div class="main-users-info-column">
                    <div class="main-users-info-name">人气</div>
                    <div class="main-users-info-number">[[${userMoods}]]</div>
                </div>
                <div class="main-users-info-column">
                    <div class="main-users-info-name">商品</div>
                    <div class="main-users-info-number">[[${userArticleSTotal}]]</div>
                </div>
                <div class="main-users-info-avatar">
                    <a th:href="${requestUrl}" th:title="${shopUserName}"><img class="main-users-avatar"
                                                                               th:src="${shopUserImg}" width="184"
                                                                               height="184"></a>
                </div>
                <div class="main-users-info-column">
                    <div class="main-users-info-name">关注</div>
                    <div class="main-users-info-number">[[${userLooks}]]</div>
                </div>
                <div class="main-users-info-column">
                    <div class="main-users-info-name">粉丝</div>
                    <div class="main-users-info-number">[[${userBelogtoS}]]</div>
                </div>
            </div>
            <a class="main-users-cover-more" href="javascript:;"><i class="fa fa-share-alt"></i></a>
            <div class="main-users-cover-options">
                <a class="main-users-cover-options-item" href="javascript:;" id="opts-fx">分享页面</a>
            </div>
        </div>
        <div class="main-users-card">
            <div class="main-users-card-name">[[${shopUserName}]]</div>
            <div class="main-users-card-actions" th:if="${followFlag}==0">
                <a class="main-users-btn main-users-btn-primary follow-user" href="javascript:;" onclick="follow();" id="follow" th:if="${lookFlag}==0">关注</a>
                <a class="main-users-btn main-users-btn-primary follow-user" href="javascript:;" th:if="${lookFlag}==1">已关注</a>
                <a class="main-users-btn send-user-pm" th:href="'/person/sendMessage/'+${beLongUserId}+'.html'">私信</a>
            </div>
        </div>
        <div class="blocker blocker-reusable hidden" id="main-users-fx">
            <div class="main-users-fx">
                <div class="main-users-fx-left">
                    <div class="main-users-fxi wx">微信扫码</div>
                    <div id="wx-id" class="main-users-fx-qrcode"></div>
                </div>
                <div class="main-users-fx-right">
                    <a class="main-users-fxi wb weibo-link" href="javaScript:;" title="分享到微博" onclick="shareTo('sina')">新浪微博</a>
                    <a class="main-users-fxi qq" title="分享给QQ好友" href="javaScript:;" onclick="shareTo('qq')">QQ好友</a>
                    <a class="main-users-fxi qzone" target="_blank" title="分享到QQ空间" href="javaScript:;"
                       onclick="shareTo('qzone')">QQ空间</a>
                </div>
                <div class="main-users-fx-bottom">
                    <input type="text" name="url" id="url" value="" class="main-users-fx-input" readonly="readonly">
                    <input type="button" class="main-users-fx-copy" onclick="copytext()" value="复制">
                </div>
            </div>
        </div>
        <script type="text/javascript">
            function follow() {
                let followMeBelongId = $("#belongId").val();
                $.ajax({
                    type: 'POST',
                    url: "/user/editFollowMe.html",
                    data: {
                        "followMeBelongId": followMeBelongId,
                        "type": 1
                    },
                    success: function (res) {
                        if (res.rt == -1) {
                            layer.msg("未登录,请登录！", {time: 1000}, function () {
                                window.location.href = "/to/login.html?redirectUrl=" + "/usershop/" + followMeBelongId + ".html"
                            });
                        } else if (res.rt == 1) {
                            $("#follow").html('已关注');
                            layer.alert("关注成功！\n以后对方发布新文章时，会在您的会员中心显示哦！");
                        }else if (res.rt == 2) {
                            $("#follow").html('已关注');
                            layer.msg("已关注");
                        } else {
                            $("#follow").html('关注');
                            layer.msg("网络异常,请稍后再试!");
                        }
                    }, error: function (e) {
                        layer.closeAll();
                        showErrorAlert("网络异常,请稍后再试!");
                    }
                });
            }

            function generate() {
                var link = $('.main-users-fx-qrcode').data('url');
                $('.main-users-fx-qrcode').empty().qrcode({
                    width: 80,
                    height: 80,
                    text: link
                });
            }

            function loadQrCode() {
                $.ajax({
                    url: '/static/js/jquery.qrcode.min.js',
                    dataType: 'script',
                    cache: true
                }).then(function () {
                    generate();
                });
            }

            function copytext() {
                $('.main-users-fx-input').select();
                document.execCommand('Copy');
                var self = $('.main-users-fx-copy');
                self.val('成功复制!');
                setTimeout(function () {
                    self.val('复制');
                }, 2000);
                return false;
            }

            $(function () {
                var url = document.location.href;
                $("#url").attr("value", url)
                $("#wx-id").attr("data-url", url);
                $("#opts-fx").click(function () {
                    loadQrCode();
                    layer.open({
                        type: 1,
                        shade: false,
                        title: false,
                        content: $('#main-users-fx').html(),
                    });
                });
            })
        </script>
    </div>
    <div class="site-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="content-area">
                        <main class="site-main">
                            <div class="row posts-wrapper">
                                <th:block th:each="hotArticle: ${userArticles}">
                                    <div class="col-lg-1-5 col-6 col-sm-6 col-md-4 col-lg-3">
                                        <article
                                                class="post post-grid post-4657 type-post status-publish format-standard has-post-thumbnail sticky hentry">
                                            <div class="entry-media">
                                                <div class="placeholder" style="padding-bottom: 66.666666666667%;">
                                                    <a target="_blank" href="97.html">
                                                        <img th:src="${hotArticle?.titleImg}"
                                                             th:alt="${hotArticle?.title}">
                                                    </a>
                                                    <div class="cao-cover"><img src="/static/images/rings.svg" width="50" height="50px"></div>
                                                </div>
                                                <div class="entry-star">
                                                    <a href="javascript:void(0);" th:dataId="${hotArticle?.id}"
                                                       title="收藏文章" class="ripro-star"
                                                       th:classappend="${hotArticle?.cellectionFlag==0}?'':'ok'"
                                                       onclick="saveCollection(this)"><i class='fa fa-star-o'></i></a>
                                                </div>
                                            </div>
                                            <div class="entry-wrapper">
                                                <a target="_blank" class="grid_author_avt"
                                                   th:href="'/usershop/'+${hotArticle?.createUserId}+'.html'">
                                                    <div class="grid_author_bggo avatar bg-cover" th:style="'background-image:url('+@{${hotArticle?.userImg}}+');'"></div>
                                                </a>
                                                <header class="entry-header">
                                                    <div class="entry-meta">
                                                    <span class="meta-category" style="align-items: center;">
                                                         <i class="dot"></i><a target="_blank"
                                                                               th:href="${hotArticle?.url}"
                                                                               rel="category"
                                                                               th:text="${hotArticle?.categotyName}"></a>
                                                     </span>
                                                    </div>
                                                    <h2 class="entry-title">
                                                        <a target="_blank"
                                                           th:href="'/web/art-detail/'+${hotArticle?.id}+'.html'"
                                                           th:title="${hotArticle?.title}" rel="bookmark"
                                                           th:text="${hotArticle?.title}"></a>
                                                    </h2>
                                                </header>
                                                <div class="entry-footer">
                                                    <ul class="post-meta-box">
                                                        <li class="meta-date">
                                                            <i class="fa fa-clock-o"></i>
                                                            <time style="margin-left: 5px;"
                                                                  th:text="${#dates.format(hotArticle?.createTime, 'yyyy-MM-dd')}"></time>
                                                        </li>
                                                        <!--                                                        <li class="meta-price" th:styleappend="${hotArticle?.freeType}==0?'display:none':''">-->
                                                        <!--                                                            <i class="fa fa-database"></i><span th:text="${hotArticle?.money}"></span>-->
                                                        <!--                                                        </li>-->
                                                        <li class="meta-views">
                                                            <i class="fa fa-eye"></i>
                                                            <span style="margin-left: 5px;"
                                                                  th:text="${#strings.isEmpty(hotArticle?.lookSee)?0:hotArticle?.lookSee}"></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                </th:block>
                            </div>
                            <script th:inline="javascript">
                                var count = [[${userArticleSTotal}]];
                                var keywords = [[${keywords}]];
                                var currentPage = [[${userCurrentPage}]];
                                var requestUrl = [[${requestUrl}]];
                            </script>
                            <script type="text/javascript" th:src="@{'/static/Kz.layedit/Content/Layui-KnifeZ/layui.js'}"></script>
                            <script>
                                layui.use('laypage', function () {
                                    var laypage = layui.laypage;
                                    //执行一个laypage实例
                                    laypage.render({
                                        elem: 'pageId',
                                        count: count,
                                        curr: currentPage,  //当前页数
                                        limit: 16,
                                        theme: '#1E9FFF',
                                        jump: function (obj, first) {
                                            if (!first) {
                                                location.href = requestUrl + "?pageNum=" + obj.curr;
                                            }
                                        }
                                    });
                                });
                            </script>
                            <div class="infinite-scroll-action-one" id="pageId">
                            </div>
                        </main>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--底部-->
    <div th:insert="common/footer::footerBar(${resTags},${resLinkList})"/>

</div>
</body>
</html>
